<template>
    <!-- 配置组件属性 -->
    <div class="prop-design">
        <el-tabs v-model="activeName">
            <el-tab-pane label="组件配置" name="1">
                <div>
                    <component :is="propComponent" :data="selectItem" :Api="reportData.Api" :previewOption="reportData.previewOption"></component>
                </div>
            </el-tab-pane>
            <el-tab-pane label="API配置" name="2">
                <field-bind :reportData="reportData"></field-bind>
            </el-tab-pane>
            <el-tab-pane label="报表配置" name="3">
                <report-bind :reportData="reportData" :temporaryBind="temporaryBind" @save="save"></report-bind>
            </el-tab-pane>
            <el-tab-pane label="预览配置" name="4">
                <preview-bind :reportData="reportData"></preview-bind>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import FieldBind from "./components/FieldBind/FieldBind.vue";
import ReportBind from "./components/ReportBind/ReportBind.vue";
import PreviewBind from "./components/PreviewBind/PreviewBind.vue";
export default {
    name: "PropDesign",
    props: {
        selectItem: {
            type: Object
        },
        reportData: {
            type: Object
        },
        temporaryBind: {
            type: Object
        }
    },
    components: {
        FieldBind,
        ReportBind,
        PreviewBind,
        PropParperA4: () => import('./components/parper/parperA4/PropParperA4.vue'),
        PropDescriptions: () => import('./components/layout/PropDescriptions/PropDescriptions.vue'),
        PropGrid: () => import('./components/layout/PropGrid/PropGrid.vue'),
        PropFlex: () => import('./components/layout/PropFlex/PropFlex.vue'),
        PropTable: () => import('./components/layout/PropTable/PropTable.vue'),
        PropText: () => import('./components/normal/PropText/PropText.vue'),
        PropDivider: () => import('./components/normal/PropDivider/PropDivider.vue'),
        PropImage: () => import('./components/normal/PropImage/PropImage.vue'),
        PropPicture: () => import('./components/normal/PropPicture/PropPicture.vue'),
        PropCanvasText: () => import('./components/normal/PropCanvasText/PropCanvasText.vue'),
        PropSelect: () => import('./components/normal/PropSelect/PropSelect.vue')
    },
    data() {
        return {
            activeName: "1",
            propComponent: null
        }
    },
    methods: {
        save() {
            this.$emit('save');
        }
    },
    watch: {
        selectItem: {
            handler(val) {
                this.propComponent = val.propComponentName || "";
            },
            deep: true
        }
    }
}
</script>

<style>
    @import url('./PropDesign.css');
</style>